<template>
    <el-dialog :title="title" v-model="visible" width="480px" :close-on-click-modal="false" @close="emits('close')">
        <el-form ref="formRef"
                 :model="form"
                 :rules="formRules"
                 :label-width="120">
          
            <el-form-item label="部门名称:" prop="name">
                <el-input v-model="form.name" placeholder="请输入部门名称"></el-input>
            </el-form-item>
            <el-form-item label="上级部门:" prop="parent_id" v-if="!hasNone">
                <el-tree-select v-model="form.parent_id" 
                                style="width:100%"
                                check-strictly
                                :data="departTree" 
                                :render-after-expand="false"
                                :props="{
                                    label:'name',
                                    value:'id'
                                }"></el-tree-select>
            </el-form-item>
            <el-form-item label="负责人:" prop="leader">
                <el-input v-model="form.leader" placeholder="请输入负责人姓名"></el-input>
            </el-form-item>
            <el-form-item label="联系电话:" prop="leader_phone">
                <el-input v-model="form.leader_phone" placeholder="请输入负责人联系电话"></el-input>
            </el-form-item>
            <el-form-item label="排序:" prop="sort">
                <el-input v-model="form.sort" placeholder="请输入排序"></el-input>
            </el-form-item>
            <el-form-item label="备注:" prop="remark">
                <el-input v-model="form.remark" placeholder="0-20字"></el-input>
            </el-form-item>
            <el-form-item label="是否启用" prop="enabled">
                <el-switch v-model="form.enabled"
                           :active-value="1"
                           :inactive-value="0"></el-switch>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="emits('close')">取 消</el-button>
                <el-button type="primary" @click="save(formRef)">确 定</el-button>
            </div>
        </template>
        
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref,reactive, watch, computed, nextTick} from 'vue'
import { ElMessage } from 'element-plus'

import type { FormInstance, FormRules } from 'element-plus'
import { useRoute } from 'vue-router'

import { saveDepart } from 'services/setting'

import type {Depart} from '../../index'

const emits = defineEmits(['close', 'success'])

const route = useRoute()

const formRef = ref<FormInstance>()

const form = ref<Depart>({
    id:undefined,
    name:'',
    parent_id:undefined,
    remark: '',
    sort:undefined,
    leader:'',
    leader_phone:'',
    enabled:1
})

const formRules = reactive<FormRules>({
    name:[{required:true,message:'请输入部门名称'},{max:10,message:'最多只能10个文字'}],
})

const props = defineProps<{
    dialogVisible:boolean,
    detail?:Depart,
    state:string,
    hasNone:boolean,
    departTree?:Depart[]
}>();

const visible = ref(false)

watch(() => props.dialogVisible, async (val) => {
    visible.value = val
    if (visible.value === true) {
        await nextTick()
        if (props.state === 'edit') {
            form.value = props.detail || {
                id:undefined,
                name:'',
                parent_id:undefined,
                remark: '',
                sort:undefined,
                leader:'',
                leader_phone:'',
                enabled:1
            }
        } else {
            formRef.value?.resetFields()
        }
        
    }
},{
    immediate:true
})

const title = computed(() => {
    return props.state == 'add' ? '新增部门' : '编辑部门'
})

const save = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            saveDepart(form.value).then((res:any) => {
                ElMessage.success('操作成功')
                emits('success')
            })
        } else {
            console.log('error submit', fields)
        }
    }) 
}


</script>